import React, { memo,PureComponent } from 'react';
import { Card, Radio,Select,Button } from 'antd';
import { Row,Col,FormattedMessage } from 'umi-plugin-react/locale';
import styles from './Analysis.less';
import PolicePie from './PolicePie';
import PoliceBar from './PoliceBar';
import PoliceList from './PoliceList';
import Yuan from '@/utils/Yuan';
const { Option } = Select;
class PoliceStatistic extends PureComponent{
	constructor(props) {
	    super(props);
	    this.state = {
          salesType: "all",
          policeType: 'company_area',
          visbleWayByPolice: 'pie',
          modalPoliceVisible: false
	    }
	}

  //警力统计表显示
  handlePoliceModalVisible = flag => {
  	this.setState({
  		modalPoliceVisible: !!flag,
  	});
  };
  //警力显示切换
  handleChangePoliceType = e => {
  	if(e.target.value == "bar") {
  		this.setState({
	 			visbleWayByPolice: "pie"
	    });
  	}else if(e.target.value == "pie"){
  		this.setState({
	 			visbleWayByPolice: "bar"
	    });
  	}else {
	  	this.setState({
	      salesType: e.target.value,
	    });
  	}
  };

  //警力信息查询切换
  handleSearchPolice = e => {
  	this.setState({
  		policeType: e
  	})
  };

  render() {
    const {
      dropdownGroup,
      loading,
      policeSpreadData,
      policeDataByPoliceRank,
  		policeDataByDutyLevel,
    } = this.props;

    const { salesType,visbleWayByPolice,policeType,modalPoliceVisible } = this.state;
    let policePieData;
    if (policeType === 'company_area') {
      policePieData = policeSpreadData;
    } else if(policeType === "duty_level"){
      policePieData = policeDataByDutyLevel;
    }else {
    	policePieData = policeDataByPoliceRank;
    }
    return (
      <Card
        loading={loading}
        className={styles.salesCard}
        bordered={false}
        title={
          <FormattedMessage
            id="app.statisticanalysis.policebyarea"
            defaultMessage="The Proportion of Sales"
          />
        }
        bodyStyle={{ padding: 24 }}
        extra={
          <div className={styles.salesCardExtra}>
            {dropdownGroup}
            <div className={styles.salesTypeRadio}>
              <Button onClick={()=> this.handlePoliceModalVisible(true)}>
                警力统计表
              </Button>
            	<Select  style={{minWidth: '120px',marginRight: '10px',marginLeft: '10px'}} defaultValue="company_area" placeholder="请选择" onChange={this.handleSearchPolice}>
      				    <Option value="company_area">行政区划</Option>
      				    <Option value="duty_level">职务层次</Option>
      				    <Option value="police_rank">拟授警衔</Option>
      			  </Select>
              <Radio.Group value={salesType} onChange={this.handleChangePoliceType}>
                {/*<Radio.Button value="all">
                  <FormattedMessage id="app.analysis.channel.all" defaultMessage="ALL" />
                </Radio.Button>
                <Radio.Button value="online">
                  <FormattedMessage id="app.analysis.channel.online" defaultMessage="Online" />
                </Radio.Button>
                <Radio.Button value="stores">
                  <FormattedMessage id="app.analysis.channel.stores" defaultMessage="Stores" />
                </Radio.Button>*/}
                 {visbleWayByPolice == "bar"?(
                  	<Radio.Button value="bar">
                    	<FormattedMessage id="app.analysis.channel.bar" defaultMessage="bar" />
                  	</Radio.Button>
                  ):(
                    <Radio.Button value="pie">
                      <FormattedMessage id="app.analysis.channel.pie" defaultMessage="pie" />
                    </Radio.Button>
                )}
              </Radio.Group>
            </div>
          </div>
        }
        style={{ marginTop: 24 }}
      >
        <h4 style={{ marginTop: 10, marginBottom: 32 }}>
          <FormattedMessage id="app.statisticanalysis.policenum" defaultMessage="Sales" />
        </h4>
       {visbleWayByPolice == "bar"?(
        <PoliceBar
          height={300}
          data={policePieData}
          policeType={policeType}
        />
        ):(
       	<PolicePie
          hasLegend
          subTitle={<FormattedMessage id="app.statisticanalysis.policenum" defaultMessage="Sales" />}
          total={() => <span>{policePieData?policePieData.reduce((pre, now) => now.y + pre, 0): null}</span>}
          data={policePieData}
          policeType={policeType}
          valueFormat={value => <span>{value}</span>}
          height={270}
          lineWidth={4}
          style={{ padding: '8px 0' }}
        />
        )}
        <PoliceList
          modalPoliceVisible={modalPoliceVisible}
          handlePoliceModalVisible={this.handlePoliceModalVisible}
        />
      </Card>
    )
  }

}

export default PoliceStatistic;
